<template>
    <div class="head">
         <div class="headerBox">
      <div class="header border-b">
        <div class="headerText textover ft18">客服中心</div>
        <div class="left-back" @click="clickHandler()">
          
        </div>
        <div class="right-more"></div>
      </div>
    </div>
    <div class="self-service">
        <div class="title">自助服务</div>
        <div class="tab">
            <router-link tag="a" to="/userorder1" active-class="active" href="javascript:void(0);" class="on">
                <div>
                    <img src="../assets/img/01.png" class="serviceimg">
                </div>
                <div class="content">物流查询</div>
            </router-link>
        
        
            <router-link tag="a" to="/sale" active-class="active" href="javascript:void(0);" class="on">
                <div>
                    <img src="../assets/img/02.png" class="serviceimg">
                </div>
                <div class="content">自主售后</div>
            </router-link>
        
        
            <router-link tag="a" to="/userorder1" active-class="active" href="javascript:void(0);" class="on">
                <div>
                    <img src="../assets/img/03.png" class="serviceimg">
                </div>
                <div class="content">发票服务</div>
            </router-link>
        
        
            <a href="https://wap.epet.com/app/advice?type=2&channel=1" class="on">
                <div>
                    <img src="../assets/img/04.png" class="serviceimg">
                </div>
                <div class="content">建议反馈</div>
            </a>
        
        
            <a href="https://wap.epet.com/app/user/help" class="on">
                <div>
                    <img src="../assets/img/05.png" class="serviceimg">
                </div>
                <div class="content">帮助中心</div>
            </a>
        </div>
        <div class="self-service">
            <div class="title">
                客服团队
            </div>
            <div class="person" v-for="(item,index) in imgList" :key="index">
                <div class="flex">
                    <div class="flex-ac">
                        <div>
                            <img :src="item.photo" height="70" width="70" alt class="photoimg">
                        </div>
                        <div>
                            
                            <img src="../assets/img/ept.png" height="15px" class="mr">
                        </div>
                    </div>
                
                <div class="it1">
                    <p class="ft15 c333">
                        <span>{{item.name}}</span>
                    </p>
                    <div class="c666 ft12">{{item.desc}}</div>
                    <div class="clearfix mt5" v-for="(i,cindex) in imgList[index].tag_info" :key="cindex">
                        <p class="greyBg" >
                            <span class="headline">{{i.text}}</span>
                            
                        </p>
                        
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom_dox">
        <div class="bottom bgfff border-t">
            <ul class="height100 flex flex-ac">
                <li class="bottom_item ftc it1">
                    <a class="dib w100 ft18 c333">
                        <img src="../assets/img/phone.png" class="bottom_img mb5">
                        <div class="ft11 c666">电话客服</div>
                    </a>
                </li>
                <li class="bottom_item ftc it1">
                    <img src="../assets/img/serve.png" class="bottom_img mb5">
                    <div class="ft11 c666">在线客服</div>
                </li>
                <li class="bottom_item ftc it1 pet_master">
                    <img src="../assets/img/hand.png" class="bottom_img mb5">
                    <div class="ft11 c666">育宠师</div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [],
    };
  },
  async mounted() {
    
    let result = await this.$http.get({
      url: "/user/customerService.html",
      params: {
        version: '517',
        system: 'wap',
        isWeb: 1,
        distinct_id:
          '96513866273889',
        debug_param:''
      }
    })
    this.imgList = result.data.team.list;
    
    
    
  },
    methods:{
        clickHandler(){
            this.$router.back(-1);
        },
        geturl(type){
            return '../assets/img/approve-'+type+'.png'
        }
    }
}
</script>
<style lang="stylus" scoped>
.head
  background-color #f5f5f5
  height 100%
  overflow auto
.header {
  width: 100%;
  height: 0.5rem;
  background: #fff;
  line-height: 0.5rem;
  color: #333;
  position: relative;
  border-bottom: 0.01rem solid #f3f3f3;
}

.headerText {
  text-align: center;
  margin: 0 0.65rem;
}

.textover {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}

.ft18 {
  font-size: 0.18rem;
}

.left-back {
  width: 0.35rem;
  height: 0.35rem;
  background: url('../assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  left: 0.05rem;
  top: 0.07rem;
  background-position: 0 0;
}

.right-more {
  width: 0.35rem;
  height: 0.35rem;
  background: url('../assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  right: 0.05rem;
  top: 0.07rem;
  background-position: 0 -0.7rem;
}
.self-service
    margin-top: 0.1rem;
.title
    color: #333;
    font-size: 0.16rem;
    margin-bottom: 0.1rem;
.tab
    border-radius: 0.1rem;
    display: flex;
    background: #fff;
.on
    display: block;
    min-width: 0;
    -webkit-box-flex: 1;
    flex: 1;
    padding-bottom: 0.15rem;
    padding-top: 0.15rem;
    text-align: center;
.serviceimg
    width: 0.23rem;
    height: 0.21rem;
img 
    vertical-align: middle;
.content
    font-size: 0.12rem;
    padding-top: 0.05rem;
    color: #666;
    display: block;
    min-width: 0;
    -webkit-box-flex: 1;
    flex: 1;
.person
    border-radius: 0.1rem;
    background: #fff;
    padding: 0.1rem;
    margin-bottom: 0.1rem;
.flex
    display flex
.flex-ac
    -webkit-box-align: center;
    align-items: center;
.photoimg
    border-radius: 50%;
    isplay: block;
    margin-right: 0.1rem;
.mr
    margin-right: 0.05rem;
.it1
    display: block;
    min-width: 0;
    -webkit-box-flex: 1;
    flex: 1;
.c333 
    color: #333;

.ft15 
    font-size: 0.15rem;
.c666 
    color: #666;

.ft12 
    font-size: 0.12rem;
.mt5 
    margin-top: 0.05rem;
.greyBg
    background: #F3F4F5;
    height: 0.2rem;
    line-height: 0.18rem;
    padding: 0 0.03rem;
    margin-bottom: 0.04rem;
    border-radius: 0.05rem;
    color: #666;
    margin-right: 0.05rem;
    float: left;
.headline
    -webkit-transform-origin-x: center;
    line-height: 0.12rem;
    display: inline-block;
    font-size: 0.12rem;
    text-align: center;
.bottom_dox {
    width: 100%;
    height: 0.59rem;
}
.bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 0.59rem;
    bottom: 0;
}
.bgfff {
    background: #fff;
}
.flex
    display flex
.flex-ac {
    -webkit-box-align: center;
    align-items: center;
}
.height100 {
    height: 100%;
}
.it1 {
    -webkit-box-flex: 1;
    flex: 1;
}
.ftc {
    text-align: center;
}
.dib {
    display: inline-block;
}
.ft18 {
    font-size: 0.18rem;
}
.w100 {
    width: 100%;
}
.bottom_img {
    width: 0.25rem;
    height: 0.25rem;
}
.mb5 {
    margin-bottom: 0.05rem;
}
.ft11 {
    font-size: 0.11rem;
}
.c666 {
    color: #666;
}
</style>